<template>
  <div>
    <div class="list-area">
      <div class="setting-area glo-content-area">
        <div class="btns glo-btn-group">
          <div class="item" style="float:left;margin-right:40px">
            <div class="label">{{$t('AccessIndex.AccessJobdeNum')}}</div>
            <Cascader :data="recordTypes" v-model="recordType"
              @on-change="handleChange1"
              @on-visible-change="handleChange"
              change-on-select>
            </Cascader>
            <!-- @on-visible-change="handleChange"  -->
          </div>
          <div class="item" style="float:left;margin-right:40px">
            <div class="label">{{$t('areaIndex.areaManName')}}</div>
            <Input
              v-model="personName"
              :placeholder="$t('staffIndex.staffDepartCrewSearch')"
              search
              @on-search="getData"
            />
          </div>
          
          <Button
            v-show="tableId!='无'&&allPermissions.verAddBtn"
            type="primary"
            @click="showCreate1"
          >{{ $t("versionIndex.verAddBtn") }}</Button>
        </div>
        <div class="title">{{ $t("staffIndex.staffDepartCrewList") }}</div>
      </div>
      <!-- <div class="glo-search-area">
        <div class="date-filter widget-item">
          <div class="widget-label">{{$t("emailSetting.BodyTemAnimalTimeS")}}：</div>
          <DatePicker
            class="date-widget"
            v-model="selectDate"
            type="daterange"
            :placeholder="$t('emailSetting.BodyTemAnimalTimeScope')"
          />
        </div>
        <div class="date-filter widget-item">
          <div class="widget-label">{{$t("companyManagement.companyName")}}：</div>
          <Input  v-model="searchName" :placeholder="$t('companyManagement.pleaseEnter')" />
        </div>
        <div class="date-filter widget-item">
          <div class="widget-label">{{$t("companyManagement.industry")}}：</div>
          <Input  v-model="searchIndustry" :placeholder="$t('companyManagement.pleaseEnter')" />
        </div>
        <div class="glo-clear-after" style="float:right">
          <i-button style="margin-top:36px" type="primary" @click="getData()">{{$t('emailSetting.Search')}}</i-button>
        </div>
      </div> -->
      <Table
        ref="table"
        class="list"
        :data="list"
        :columns="columns"
        @on-selection-change="handleSelection"
        @on-select-cancel="cancelOne"
        @on-select-all-cancel="cancelOne"
        @on-select-all="allSelected=true"
      />
      <Page
        class="glo-content-area glo-pagenation"
        :total="total"
        :pageSize="pageSize"
        show-sizer
        :current="page"
        show-total
        @on-change="changePage"
        @on-page-size-change="changeSize"
      >
        <div class="selectedBox">
          <Checkbox class="allSelected" :disabled="list.length<=0" v-model="allSelected" @on-change="handleSelectAll">{{$t('areaIndex.areaSearchAll')}}</Checkbox>
          <span class="left">{{$t('devicesIndex.devSelected')}} {{selectionArr.length||0}} </span> 
          <Button size="small" class="seleted" @click="handleDelSome" v-show="allPermissions.stafferrorDel">{{$t('staffIndex.stafferrorDel')}}</Button>
          <span class="seletedRight"> {{$t('newDevices.altogether')}} {{total}} {{ $t("newDevices.entries")}}</span>
        </div>
      </Page>
    </div>
    <!-- <UserEdit
      v-if="ifCreate"
      @close="closeCreate"
      @updata="updata"
    /> -->
    <UserEdit
      v-if="ifUpdate"
      edit-type="update"
      :edit-item="editItem"
      @close="closeUpdate"
      @updata="updata"
    />
    <AreaEdit
      v-if="ifCreate1"
      @close="closeCreate"
    />
    <AreaEdit
      v-if="ifUpdate1"
      edit-type="update"
      :edit-item="editItem"
      @close="closeUpdate"
    />
  </div>
</template>

<script>
import {
  mapState,
} from 'vuex'
import {
  getListNew,
} from '@/api/person.js'
import {
  areaUnBindPerson,
} from '@/api/area.js'
import {
  getPhoto,
} from '@/api/public.js'
import $ from 'jquery'
import pageMixin from '@/utils/mixins/pageMixin.js'
import moment from 'moment'
import UserEdit from './UserEdit'
import UserListSettings from './UserListSettings'
import AreaEdit from './AreaEdit'
export default {
  mixins: [
    pageMixin,
  ],
  components: {
    UserEdit,
    AreaEdit,
  },
  computed: {
    ...mapState('depart', [
      'selectedDepart',
      // 'selectedDepartNew',
    ]),
    btnShow () {
      return this.$store.state.btnShow
    },
    tableId () {
      return this.$store.state.tableId
    },
  },
  watch: {
    tableId () {
      this.selectionArr=[]
      this.list=[]
      this.allSelected=false;
      this.page=1
      this.getData()
      return this.$store.state.tableId
    },
    btnShow () {
      // this.sortsucc = data.succ 
      //     this.sortfail = data.fail

      console.log(this.sortsucc)
      console.log(this.sortfail)
      this.toggle= this.$t('staffIndex.staffDepaUserMan')
      this.columns = [
        { type: 'selection', width: 70 },
        {
          type: 'index',
          width: 60,
          indexMethod: this.$_index_method,
        },
        {
          title: this.$t('staffIndex.staffDepartPhoto'),
          key: 'img',
          width: 120,
          render: (h, { row }) => {
            if (!row.photo || row.photo === '') {
              return h('div', '-')
            }
            return h('div', {
              class: 'img-area',
            }, [

              h('Tooltip', {
                props: {
                  placement: 'right-start',
                  transfer: true,
                }
              }, [
                h('viewer', [
                  h('img', {
                    style: {
                      cursor: 'pointer',
                    },
                    attrs: {
                      src: getPhoto(row.photo),
                    },
                  }),
                ]), h('span', {
                  slot: 'content',
                  style: {
                    whiteSpace: 'normal',
                  }
                }, this.$t('title.clickBig')),

              ])
            ])
          },
        },
        {
          title: this.$t('staffIndex.staffDepartUsername'),
          width: 100,
          key: 'username',
        },
        {
          title: this.$t('AccessIndex.AccessJobNum'),
          key: 'worknum',
          width: 100,
          render: (h, { row }) => {
            let label = '-'
            if (row.worknum) {
              label = row.worknum
            }
            return h('div', label)
          },
        },
        {
          title: this.$t('AccessIndex.AccessJobdeNum'),
          key: 'departName',
          minWidth: 120,
          render: (h, { row }) => {
            let label = row.departName
            if (row.departName=='新部门') {
              label = this.$t('title.newDepart')
            }
            return h('div', label)
          },
        },
        {
              title: this.$t('newDevices.issuedEquipment'),
              key: 'type',
              minWidth: 120,
              render: (h, { row }) => {
                let label = '-'
                let a = ''
                if (row.type) {
                  label = this.$t('staffIndex.stafferror')
                  return h('div', 
                  [
                    h(
                    'span',
                      {     
                        // style: {color: 'red'},
                        class:'ada',
                        style: { 
                          width: '10px', 
                          height: '10px',
                          backgroundColor: 'red', 
                          borderRadius:'50%',
                          display:'inline-block',
                          cursor:'pointer'
                        },
                    },
                    a
                    ),
                  h(
                    'span',{
                      style: { 
                        color: 'red',    
                        cursor:'pointer'                   
                      },
                      props: { row},
                      on: {
                        click: (e) => {
                          this.clickError(row)
                        }
                      },
                  
                    },
                    ' '+label
                    ),
                  
                  ],)
                }else{
                  label = this.$t('staffIndex.staffDepaUser2')
                  return h('div', 
                  [
                    h(
                    'span',
                      {     
                        class:'ada2',
                        style: { 
                          width: '10px', 
                          height: '10px',
                          backgroundColor: 'green', 
                          borderRadius:'50%',
                          display:'inline-block',
                          
                        },
                    },
                    a
                    ),
                  h(
                    'span',
                    {
                      style: { 
                        color: 'green',                       
                      }
                    },
                    ' '+label
                    ),
                  
                  ],)
                  
                }
                
              },
        },
        
        {
          title: this.$t('staffIndex.staffDeparSex'),
          key: 'sex',
          minWidth: 80,
          render: (h, { row }) => {
            let label = '-'
            if (row.sex === '1') {
              label = this.$t('staffIndex.staffDepartMan')
            } else if (row.sex === '2') {
              label = this.$t('staffIndex.staffDepartWoman')
            }
            return h('div', label)
          },
        },
        {
          title: this.$t('devicesIndex.devTableoperation'),
          key: 'settings',
          width: 120,
          render: (h, { row }) => {
            return h(UserListSettings, {
              props: { row ,allPermissions:this.allPermissions},
              on: {
                itemClick: (name) => this.handleSettingsClick(name, row),
              },
            })
          },
        },
      ]
      this.getDataList()
      
      return this.$store.state.btnShow
    },
  },
  data () {
    
    return {
      total: 0,
      selectDate: [],
      searchIndustry: '',
      modal1: false,
      selection: [],
      page: 1,
      pageSize: 10,
      list: [],
      personName: '',
      columns: [
        { type: 'selection', width: 70 },
        {
          type: 'index',
          width: 40,
          indexMethod: this.$_index_method,
        },
        {
          title: this.$t('staffIndex.staffDepartPhoto'),
          key: 'img',
          width: 120,
          render: (h, { row }) => {
            if (!row.photo || row.photo === '') {
              return h('div', '-')
            }
            return h('div', {
              class: 'img-area',
            }, [

              h('Tooltip', {
                props: {
                  placement: 'right-start',
                  transfer: true,
                }
              }, [
                h('viewer', [
                  h('img', {
                    style: {
                      cursor: 'pointer',
                    },
                    attrs: {
                      src: getPhoto(row.photo),
                    },
                  }),
                ]), h('span', {
                  slot: 'content',
                  style: {
                    whiteSpace: 'normal',
                  }
                }, this.$t('title.clickBig')),

              ])
            ])
          },
        },
        {
          title: this.$t('staffIndex.staffDepartUsername'),
          width: 100,
          key: 'username',
        },
        {
          title: this.$t('AccessIndex.AccessJobNum'),
          key: 'worknum',
          width: 100,
          render: (h, { row }) => {
            let label = '-'
            if (row.worknum) {
              label = row.worknum
            }
            return h('div', label)
          },
        },
        {
          title: this.$t('AccessIndex.AccessJobdeNum'),
          key: 'departName',
          minWidth: 120,
          render: (h, { row }) => {
            let label = row.departName
            if (row.departName=='新部门') {
              label = this.$t('title.newDepart')
            }
            return h('div', label)
          },
        },
        
        {
          title: this.$t('staffIndex.staffDepaUser1'),
          key: 'type',
          width: 60,
          renderHeader: (h, params) => {
            
            return h('span', 
            // [
            //     h('Tooltip', {
            //         props: {
            //             content: `${this.$t('staffIndex.staffDepaUser2')}:${this.sortsucc}，${this.$t('staffIndex.stafferror')}:${this.sortfail}`,
            //             trigger: 'hover',
            //             size: 'small',
            //             placement: 'right',
            //         },
            //         style:{
            //           zIndex:1000,
            //         }

            //     },
                 [
                    h('span', {
                        style: {cursor: 'pointer'},
                        domProps: {
                            innerHTML:`${this.$t('staffIndex.staffDepaUser1')}( ${this.sortsucc}/${this.sortfail})` ,
                            title:  `${this.$t('staffIndex.staffDepaUser2')}:${this.sortsucc}，${this.$t('staffIndex.stafferror')}:${this.sortfail}`,
                        },
                        on: {
                            click:(e) => { 
                              // this.isSolt



                              if (this.isSolt) {
                                this.isSolt = false;
                                this.sortData = 2
                                sessionStorage.setItem('sortId', 2)
                                this.$store.state.sortId = 2
                              }else{
                                this.isSolt = true;
                                this.sortData = 1
                                sessionStorage.setItem('sortId', 1)
                                this.$store.state.sortId = 1

                              }
                              
                  
                            //  this.handleSettingsClick('edit', row)
                            }
                        // itemClick: ('edit') => this.handleSettingsClick('edit', row),
                        },
                    })
                ])
            // ])
          },
          render: (h, { row }) => {
            let label = '-'
            if (row.type) {
              // label = row.type
              label = this.$t('staffIndex.staffDepaUser3')
              return h('div',[h('span', label), 

              h('Tooltip', {
                props: {
                  placement: 'right-start',
                  transfer: true,
                }
              }, [
          
                  h('img', {
                    attrs: {
                      src: require('../../../assets/error.png'),
                    },
                    style: { 
                      width: '20px', 
                      position: 'relative', 
                      top: '5px',
                      left: '10px',
                    },
                  }), h('span', {
                  slot: 'content',
                  style: {
                    whiteSpace: 'normal',
                  }
                }, this.$t('staffIndex.staffDepaUserHint')),

              ])
              
              
              // h('img',{
              //     attrs: {
              //         src: require('../../../assets/error.png'),
              //     },
              //     style: { 
              //       width: '20px', 
              //       position: 'relative', 
              //       top: '5px',
              //       left: '10px',
              //     },
              //     domProps: {
              //         title: this.$t('staffIndex.staffDepaUserHint')
              //       }
              //   })





              ])
            } else {
              // label = this.$t('staffIndex.staffDepaUser4')
              label = '-'
              return h('div', label)
            }  
          },

          sortable: true,
          sortMethod: (a,b,type)=>{
            console.log(a)
            console.log(b)
            console.log(type)
            if(type=='asc'){
              this.sortData = 2
              sessionStorage.setItem('sortId', 2)
              this.$store.state.sortId = 2
            }else{ 
              this.sortData = 1
              sessionStorage.setItem('sortId', 1)
              this.$store.state.sortId = 1
            }
            // this.$_page_update()
          }
    
        },
        {
          title: this.$t('staffIndex.staffDeparSex'),
          key: 'sex',
          width: 50,
          render: (h, { row }) => {
            let label = '-'
            if (row.sex === '1') {
              label = this.$t('staffIndex.staffDepartMan')
            } else if (row.sex === '2') {
              label = this.$t('staffIndex.staffDepartWoman')
            }
            return h('div', label)
          },
        },
        {
          title: this.$t('devicesIndex.devTableoperation'),
          key: 'settings',
          width: 120,
          render: (h, { row }) => {
            return h(UserListSettings, {
              props: { row ,allPermissions:this.allPermissions},
              on: {
                itemClick: (name) => this.handleSettingsClick(name, row),
              },
            })
          },
        },
      ],
      sortData: 0,
      sortsucc: 0,
      sortfail: 0,
      ifCreate: false,
      ifUpdate: false,
      ifCreate1: false,//人员添加弹框
      ifUpdate1: false,//人员添加弹框
      editItem: null,
      selectionArr:[],
      // areaId:this.$store.state.tableId||'',
      selectedDepartNew:window.sessionStorage.getItem('departIdNew')||'727',
      recordTypes: [],
      recordType: [],
      depId: '',
      allPermissions:{
        verAddBtn:false,
        stafferrorDel:false,
        verListSettingsEdit:false,
        verListSettingsDel:false,
      },
      allSelected:false,
    }
  },

  mounted () {
    this.getData()
    this.getDataList()
    this.getAllPermissions()
    // console.log('allPermissions',this.allPermissions)
    // this.ifUpdate=true
  },

  methods: {
    getAllPermissions(){
      // let da=this.$store.state.permissions||[]
      // let da=this.$store.getters.permissions||[]
      let da=JSON.parse(window.localStorage.getItem('logo'))||[]
      da.map(v => {
        if(v.permission=='#newDevices'&&v.children){
          v.children.map(a=>{
            if(a.permission=='#staffDepartCrewList'&&a.children){
              a.children.map(c=>{
                if(c.permission=='#verAddBtn2'&&c.checked==='true'){
                  this.allPermissions.verAddBtn=true
                } 
                if(c.permission=='#stafferrorDel4'&&c.checked==='true'){
                  
                  this.allPermissions.stafferrorDel=true
                } 
                if(c.permission=='#verListSettingsEdit8'&&c.checked==='true'){
                  this.allPermissions.verListSettingsEdit=true
                } 
                if(c.permission=='#verListSettingsDel8'&&c.checked==='true'){
                  this.allPermissions.verListSettingsDel=true
                } 
              })
            }
            
          })
        }
      });
    },
    async getData () {
      // console.log('进来了depId',this.selectedDepart)
      // console.log('进来了depId1',window.sessionStorage.getItem('departIdNew'))
      this.allSelected=false 
      this.selectionArr=[]
      if(this.tableId=='无'){
        this.list = []
        this.page = 1
        this.total = 0
        return
      } 
      const { success, data } = await getListNew({
        areaId:this.tableId,
        // areaId:'3',
        page: this.page,
        limit: this.pageSize,
        depId: this.depId,
        // depId: this.selectedDepartNew,
        username: this.personName,
        // sort: this.sortData,
        // isTable: 2,
      })
      let list = []
      let page = 1
      let total = 0
      if (success) {
        if( this.sortsucc==data.succ &&this.sortfail==data.fail){
          
          this.sortsucc = data.succ 
          this.sortfail = data.fail
        }else{
          
          this.sortsucc = data.succ 
          this.sortfail = data.fail
          
          this.columns= [
            { type: 'selection', width: 70 },
            {
              type: 'index',
              width: 60,
              indexMethod: this.$_index_method,
            },
            {
              title: this.$t('staffIndex.staffDepartPhoto'),
              key: 'img',
              width: 120,
              render: (h, { row }) => {
            if (!row.photo || row.photo === '') {
              return h('div', '-')
            }
            return h('div', {
              class: 'img-area',
            }, [

              h('Tooltip', {
                props: {
                  placement: 'right-start',
                  transfer: true,
                }
              }, [
                h('viewer', [
                  h('img', {
                    style: {
                      cursor: 'pointer',
                    },
                    attrs: {
                      src: getPhoto(row.photo),
                    },
                  }),
                ]), h('span', {
                  slot: 'content',
                  style: {
                    whiteSpace: 'normal',
                  }
                }, this.$t('title.clickBig')),

              ])
            ])
          },
            },
            {
              title: this.$t('staffIndex.staffDepartUsername'),
              key: 'username',
              width: 100,
            },
            {
              title: this.$t('AccessIndex.AccessJobNum'),
              key: 'worknum',
              width: 100,
              render: (h, { row }) => {
                let label = '-'
                if (row.worknum) {
                  label = row.worknum
                }
                return h('div', label)
              },
            },
            {
              title: this.$t('AccessIndex.AccessJobdeNum'),
              key: 'departName',
              minWidth: 120,
              
              render: (h, { row }) => {
                let label = row.departName
                if (row.departName=='新部门') {
                  label = this.$t('title.newDepart')
                }
                return h('div', label)
              },
            },
            {
              title: this.$t('newDevices.issuedEquipment'),
              key: 'type',
              minWidth: 120,
              render: (h, { row }) => {
                let label = '-'
                let a = ''
                if (row.type) {
                  label = this.$t('staffIndex.stafferror')
                  return h('div', 
                  [
                    h(
                    'span',
                      {     
                        // style: {color: 'red'},
                        class:'ada',
                        style: { 
                          width: '10px', 
                          height: '10px',
                          backgroundColor: 'red', 
                          borderRadius:'50%',
                          display:'inline-block',
                          cursor:'pointer'
                        },
                    },
                    a
                    ),
                  h(
                    'span',{
                      style: { 
                        color: 'red',  
                        cursor:'pointer'                     
                      },
                      props: { row},
                      on: {
                        click: (e) => {
                          this.clickError(row)
                        }
                      },
                    },
                    ' '+label
                    ),
                  
                  ],)
                }else{
                  label = this.$t('staffIndex.staffDepaUser2')
                  return h('div', 
                  [
                    h(
                    'span',
                      {     
                        class:'ada2',
                        style: { 
                          width: '10px', 
                          height: '10px',
                          backgroundColor: 'green', 
                          borderRadius:'50%',
                          display:'inline-block',
                        },
                    },
                    a
                    ),
                  h(
                    'span',
                    {
                      style: { 
                        color: 'green',                       
                      }
                    },
                    ' '+label
                    ),
                  
                  ],)
                  
                }
                
              },
            },
        
            {
              title: this.$t('staffIndex.staffDeparSex'),
              key: 'sex',
              minWidth: 80,
              render: (h, { row }) => {
                let label = '-'
                if (row.sex === '1') {
                  label = this.$t('staffIndex.staffDepartMan')
                } else if (row.sex === '2') {
                  label = this.$t('staffIndex.staffDepartWoman')
                }
                return h('div', label)
              },
            },
            {
              title: this.$t('devicesIndex.devTableoperation'),
              key: 'settings',
              width: 120,
              render: (h, { row }) => {
                return h(UserListSettings, {
                  props: { row ,allPermissions:this.allPermissions},
                  on: {
                    itemClick: (name) => this.handleSettingsClick(name, row),
                  },
                })
              },
            },
          ];
      }
        

        list = data.data
        page = data.pageNum || 1
        total = +data.count  //+字符串转数字
      }
      this.list = list
      this.page = page
      this.pageSize = this.pageSize
      this.total = total
    },
    changeSize(e){
      this.pageSize=e;
      this.selectionArr=[]
      this.allSelected=false
      this.getData()
    },
    changePage(e){
      this.selectionArr=[]
      this.allSelected=false;
      this.page=e
      this.getData()
    },
    showCreate () {
      this.ifCreate = true
    },
    showCreate1 () {
      this.ifCreate1 = true
    },

    closeCreate (ifUpdated) {
      ifUpdated && this.getData()
      this.ifCreate = false
      this.ifCreate1 = false
    },
    closeUpdate (ifUpdated) {
      // if(ifUpdated){
        ifUpdated && this.getData()
        this.ifUpdate = false
        this.ifUpdate1 = false
        // this.getData()
    },
    updata(){
      // console.log("觸發updata")
      this.getData()
    },
    closeCreate (ifUpdated) {
      // ifUpdated && this.$_page_update()
      ifUpdated && this.getData()
      this.ifCreate = false
      this.ifCreate1 = false
      // this.getData()
    },
    handleSettingsClick (name, row) {
      switch (name) {
        case 'edit':
          this.showUpdate(row)
          break
        case 'del':
          this.handleDel(row)
          break
      }
    },
    async handleDel (item) {
      let areaId1=window.sessionStorage.getItem('tableId')||''
      let areaId=Number(areaId1)
      this.$Modal.confirm({
        title: this.$t('staffIndex.staffDepartCrewDel'),
        content: this.$t('staffIndex.staffDepartCrewDelIs'),
        onOk: async () => {
          const { success } = await areaUnBindPerson(
            [{ areaId:areaId,mid: item.mid }]
          )
          if (success) {
            this.$Message.success(this.$t('staffIndex.stafferrorDelEquipmentSucc'))
            this.getData()
            this.selectionArr=[]
            this.allSelected=false;
          } else {
            this.$Message.error(this.$t('staffIndex.staffeDelEquipmentfailed'))
          }
        },
      })
    },
    async handleDelSome (item) {
      let areaId1=window.sessionStorage.getItem('tableId')||''
      let areaId=Number(areaId1)
      if(!this.selectionArr.length){
        this.$Message.error({
          content: this.$t('staffIndex.staffSuccessDelSel'),
          duration: 5,
        })
        return
      }
      let delData=[]
      this.selectionArr.forEach(v => {
        let oneItem={
           areaId:areaId,mid: v.mid 
        }
        delData.push(oneItem)
      });
      this.$Modal.confirm({
        title: this.$t('staffIndex.staffDepartCrewDel'),
        content: this.$t('staffIndex.staffDepartCrewDelIs1'),
        onOk: async () => {
          const { success } = await areaUnBindPerson(
            delData
          )
          if (success) {
            this.$Message.success(this.$t('staffIndex.stafferrorDelEquipmentSucc'))
            this.getData()
            this.selectionArr=[]
            this.allSelected=false;
          } else {
            this.$Message.error(this.$t('staffIndex.staffeDelEquipmentfailed'))
          }
        },
      })
      
    },
    showUpdate (item) {
      // console.log('showUpdate')
      this.ifUpdate = true
      this.editItem = item
    },
    showUpdate1 (item) {
      console.log('showUpdate')
      this.ifUpdate1 = true
      this.editItem = item
    },
    handleSelection (selection = []) {
      this.selectionArr = selection
      // console.log(selection)
      // console.log('allSelected',this.allSelected)
      if(!this.selectionArr.length){
        this.allSelected=false
        return
      }
      if(this.selectionArr.length==this.pageSize){
        this.allSelected=true
      }
      else if(this.selectionArr.length<this.pageSize){
        if(this.selectionArr.length==this.total){
          this.allSelected=true
        }
        else{
          // this.allSelected=!this.allSelected
          // if(this.allSelected)
          console.log('selectOne',this.selectionArr.length,this.selectionArr.length===this.total%this.pageSize,this.page,Math.ceil(this.total/this.pageSize))
          if(this.selectionArr.length===this.total%this.pageSize&&this.page==Math.ceil(this.total/this.pageSize)){
            this.allSelected=true
          }else{
            this.allSelected=false
          }
        }
      }
      else{
        this.allSelected=false
      }
      
    },
    cancelOne(e){
      // console.log('cancelOne',e)
      this.allSelected=false
    },
    handleChange (value) {
      // if (!value) {
        console.log(this.recordType)
        this.depId=this.recordType[this.recordType.length-1]
        this.getData()
      // }
    },
    handleChange1 (value) {    
      
      if(value.length>0){
        this.recordType = value
      }else{
        this.depId=''
        this.getData()
      } 
    },
    async getDataList () {
      // 通过vuex调接口获取公司名depart是vuex中别的一套vuex模块
      const list = await this.$store.dispatch('depart/getList')
      let listString = JSON.stringify(list).replace(/"id"/g, '"value"')
      let listStringLabel = listString.replace(/"departName"/g, '"label"')
      let listStringChildren = listStringLabel.replace(/"children"/g, '"children"')
      var aParse = JSON.parse(listStringChildren)
      function dG(params) {
        params.forEach(v=>{
          if(v.children){
            dG(v.children)
          }else{
            v.children=[]
          }
        })
      }
      dG(aParse)
      
      if(aParse[0].label==="新部门"){
        let arr12 = aParse
        arr12[0].label=this.$t('title.newDepart')
        this.recordTypes=arr12
      }else{
        this.recordTypes = aParse
      }
      // this.recordType = aParse[0].label
      console.log('this.recordTypes')
      console.log(this.recordTypes)
      // setTimeout(()=>{
      //   this.recordType = this.recordTypes[0].value    
      //   },500)
    },
    handleSelectAll (status) {
      this.$refs.table.selectAll(status);
    },
    clickError(row){
      // console.log(row)
      this.$store.commit('depart/setSelected', row.depId)
      this.$router.push({
        path:"/staff",
        query: {
          // depId:row.depId,
          username:row.username,
        }
      })
    },
  },
}
</script>

<style lang="less" scoped>
.list-area{
  overflow: hidden;
  width: auto;
  /deep/ .img-area {
    width: 100px;
    height: 100px;
    margin: 6px 0;
    box-sizing: content-box;
    overflow: hidden;
    img {
      width: 100%;
    }
  }
  .item{
    display: flex;
    align-items: center;
    .label{
      display: inline-block;
      min-width: 70px;
    }
  }

}
.setting-area {
  .clearfix();

  .btns {
    float: right;
  }
  .title {
    line-height: @lh-base;
    font-size: 18px;
    font-weight: bold;
  }
}
.ivu-page{
  position: relative;
  .selectedBox{
    .allSelected{
      position: absolute;
      left: -14px;
      margin-left:30px;
    }
    .left{
      position: absolute;
      left: 56px;
      margin-left:40px;
    }
    .seleted{
      position: absolute;
      left: 140px;
      margin-left:30px;
      margin-top: 4px;
      // color: #2d8cf0;
      cursor: pointer;
    }
    .seletedRight{
      display: inline-block;
      margin-right: 0px;
    }
  }
}


</style>
